<template>
    <el-form label-width="120px">
      <div v-if="MuchShow==false">
        <el-form-item style="margin-top:10px" label="余额">
            <span style="">{{getBalanceAmount}}</span>
            <span style="color:#409EFF;margin-left:20px;cursor: pointer;">资金流水</span>
        </el-form-item>
      </div>
      <div style="width:100%;border-bottom:1px solid #E4E7ED"></div>
      <div style="display:flex;margin-top:20px">
        <el-form-item :label="shopgetinfo.bankType == 2?'支付宝账号':'账号'">
            <span style="width: 235px;display:block" v-if="MuchShow==false">{{shopgetinfo.bankNum==null||shopgetinfo.bankNum==""?'无':shopgetinfo.bankNum}}</span>
            <el-input :placeholder="shopgetinfo.bankType == 2?'请输入支付宝账号':'请输入账号'" v-model.trim="shopgetinfo.bankNum" style="width: 235px;" v-if="MuchShow==true" />
        </el-form-item>
        <el-form-item style="margin-left:5px" :label="shopgetinfo.bankType == 2?'姓名':'开户名'">
            <span style="width: 235px;" v-if="MuchShow==false">{{shopgetinfo.bankName==null||shopgetinfo.bankName==""?'无':shopgetinfo.bankName}}</span>
            <el-input :placeholder="shopgetinfo.bankType == 2?'请输入姓名':'请输入开户名'" v-model="shopgetinfo.bankName" style="width: 235px;" v-if="MuchShow==true" />
        </el-form-item>
      </div>
      <div style="display:flex">
        <el-form-item label="账号类型">
            <span style="width: 235px;display:block" v-if="MuchShow==false">{{shopgetinfo.bankType|mchTypeFormatter}}</span>
            <el-select v-if="MuchShow==true" style="width: 235px;" v-model="shopgetinfo.bankType" placeholder="请选择状态" @change="scopeTypechange">
                <el-option label="对公账号" value="0"></el-option>
                <el-option label="对私账号" value="1"></el-option>
                <el-option label="支付宝账号" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="margin-left:5px" label="开户行" v-if="shopgetinfo.bankType != 2">
            <span style="width: 235px;display:block" v-if="MuchShow==false">{{shopgetinfo.bankId|bankIDtype}}</span>
            <el-select v-if="MuchShow==true" style="width: 235px;" v-model="shopgetinfo.bankId" placeholder="请选择状态" @change="bankIdchange">
                <el-option label="工商银行" value="8"></el-option>
                <el-option label="交通银行" value="9"></el-option>
                <el-option label="招商银行" value="10"></el-option>
                <el-option label="民生银行" value="11"></el-option>
                <el-option label="中信银行" value="12"></el-option>
                <el-option label="浦发银行" value="13"></el-option>
                <el-option label="兴业银行" value="14"></el-option>
                <el-option label="光大银行" value="15"></el-option>
                <el-option label="广发银行" value="17"></el-option>
                <el-option label="平安银行" value="18"></el-option>
                <el-option label="北京银行" value="26"></el-option>
                <el-option label="华夏银行" value="28"></el-option>
                <el-option label="农业银行" value="29"></el-option>
                <el-option label="建设银行" value="30"></el-option>
                <el-option label="邮政储蓄银行" value="31"></el-option>
                <el-option label="中国银行" value="32"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="margin-left:5px" label="手续费(%)" v-if="shopgetinfo.bankType == 2">
            <span style="width: 235px;display:block" v-if="MuchShow==false">{{shopgetinfo.brokerage==null||shopgetinfo.brokerage==""?'无':shopgetinfo.brokerage}}</span>
            <el-input placeholder="请输入手续费" type="number" v-model.trim="shopgetinfo.brokerage" style="width: 235px;" v-if="MuchShow==true" />
        </el-form-item>
      </div>  
        <el-form-item label="手续费(%)" v-if="shopgetinfo.bankType != 2">
            <span style="width: 235px;display:block" v-if="MuchShow==false">{{shopgetinfo.brokerage==null||shopgetinfo.brokerage==""?'无':shopgetinfo.brokerage}}</span>
            <el-input placeholder="请输入手续费" type="number" v-model.trim="shopgetinfo.brokerage" style="width: 235px;" v-if="MuchShow==true" />
        </el-form-item>
    </el-form>
</template>
<script>
import { updateMchShop } from "@/api/sysSetUp";
import { getBalance } from '@/api/enterprise'
export default {
    props: {
        shopgetinfo: {
            type: Object,
        },
        MuchShow: {
            type: Boolean,
        },
        mchId:{
            type: String
        }
    },
    data() {
        return {
            loading: false,
            getBalanceAmount:-1,
            options: [
                {
                    value: "8",
                    label: "工商银行",
                },
                {
                    value: "9",
                    label: "交通银行",
                },
                {
                    value: "10",
                    label: "招商银行",
                },
                {
                    value: "11",
                    label: "民生银行",
                },
                {
                    value: "12",
                    label: "中信银行",
                },
                {
                    value: "13",
                    label: "浦发银行",
                },
                {
                    value: "14",
                    label: "兴业银行",
                },
                {
                    value: "15",
                    label: "光大银行",
                },
                {
                    value: "17",
                    label: "广发银行",
                },
                {
                    value: "18",
                    label: "平安银行",
                },
                {
                    value: "26",
                    label: "北京银行",
                },
                {
                    value: "28",
                    label: "华夏银行",
                },
                {
                    value: "29",
                    label: "农业银行",
                },
                {
                    value: "30",
                    label: "建设银行",
                },
                {
                    value: "31",
                    label: "邮政储蓄银行",
                },
                {
                    value: "32",
                    label: "中国银行",
                },
            ],
        };
    },
    filters: {
        mchTypeFormatter(val) {
            if (val == 0) {
                return "对公账号";
            } else if (val == 1) {
                return "对私账号";
            }
        },
        bankIDtype(val) {
            if (val == 8) {
                return "工商银行";
            } else if (val == 9) {
                return "交通银行";
            } else if (val == 10) {
                return "招商银行";
            } else if (val == 11) {
                return "民生银行";
            } else if (val == 12) {
                return "中信银行";
            } else if (val == 13) {
                return "浦发银行";
            } else if (val == 14) {
                return "兴业银行";
            } else if (val == 15) {
                return "光大银行";
            } else if (val == 17) {
                return "广发银行";
            } else if (val == 18) {
                return "平安银行";
            } else if (val == 26) {
                return "北京银行";
            } else if (val == 28) {
                return "华夏银行";
            } else if (val == 29) {
                return "农业银行";
            } else if (val == 30) {
                return "建设银行";
            } else if (val == 31) {
                return "邮政储蓄银行";
            } else if (val == 32) {
                return "中国银行";
            }
        },
    },
    watch:{
      mchId: {
      handler: function(val, oldVal) {
        if(val){
          this.getBalance(val)
        }
      },
      immediate: true,
      deep:true
      }
    },
    methods: {
        bankIdchange() {
            this.shopgetinfo.bankId = val;
        },
        scopeTypechange(val) {
            this.shopgetinfo.bankType = val;
        },

        submit() {
            var _this = this;
            this.loading = true;
            updateMchShop(this.shopgetinfo)
                .then((res) => {
                    console.log(res);
                    this.loading = false;
                    this.$message.success("修改成功");
                    _this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            _this.$router.push({
                                path: "/sysMch/list",
                            });
                        }); // 关闭当前tab回到列表
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        getBalance(data){
          var _this = this
          getBalance({mchId:data}).then(res=>{
            _this.getBalanceAmount = res.data
          })
        },
    },
};
</script>
 <style>
</style>
